<script lang="ts">
	import Record from './_com/record.svelte';
	import MenuButton from '$components/business/menu-button/menu-button.svelte';
	import IconButton from '@smui/icon-button';
	import NavList from '$components/business/nav-list/NavList.svelte';
	import { handleReqMounted } from '@/hooks/handleReq';
	import { defaultTabList } from './constant';
	import { getValue } from '$utils/get';
	import { PageLoading } from '$components/basic/loading';
	import PagingNavigation from '$components/basic/page-navigation/PagingNavigation.svelte';
	import QueDialog from './_com/QueDialog.svelte';

	const refresh = () => (resetSort(), resetPid(), clearKeyword(), resetPage(), reqInfo(true));
	const tabChange = ({ detail }: CustomEvent) => (
		resetPage(), resetSort(), (params.pid = String(detail.id).toLowerCase()), reqInfo(true)
	);

	let tabs = defaultTabList;
	let helpList = [];
	let total = 1;
	let params = { sort: 0, page: 1, size: 8, keyword: '', pid: '' };
	$: page = params.page;
	const resetSort = () => (params.sort = 0);
	const clearKeyword = () => (params.keyword = '');
	const resetPid = () => (params.pid = '');
	const resetPage = () => (params.page = 1);
	const handle = (res) => {
		const data = res.data;
		total = getValue(data, 'total', 1);
		params.page = getValue(data, 'page', 1);
		if (data) {
			const { category, data: list } = data;
			helpList = list;
			tabs = category.map((i) => ({ name: i.cateName, num: i.num, id: i.cateId }));
		}
	};
	const getUrl = () =>
		'/faq/list?' +
		Object.entries(params)
			.map(([k, v]) => `${k}=${v}`)
			.join('&');
	const { loading, reqInfo } = handleReqMounted(getUrl, { type: 'get', handle });
	const action = (index: number) => (resetPage(), (params.sort = index), reqInfo());
	let sortList = [
		{ action: () => action(0), icon: 'sort', label: 'Default' },
		{ action: () => action(1), icon: 'swap_vert', label: 'Date,old to new' },
		{ action: () => action(2), icon: 'swap_vert', label: 'Date,new to old' }
	];

	let queDialogRef: any = null;
	const openQueDialog = () => queDialogRef?.init();
</script>

<div class="w-full flex-cc flex-col p-20px">
	<div class="flex-1 w-1320px max-w-100% min-w-350px flex flex-col gap-20px pb-20px">
		<div class="w-full flex justify-between items-center bg-gray-2">
			<div class="wrapper w-fit h-full flex-cc">
				<div class="macnn-common__header-menu-button h-full bg-red-500 color-white">
					<IconButton on:click={openQueDialog} class="material-symbols-outlined clear-button-radius"
						>add</IconButton
					>
				</div>
				<div class="macnn-common__header-menu-button h-full bg-blue-7 color-white">
					<IconButton on:click={refresh} class="material-symbols-outlined clear-button-radius"
						>restart_alt</IconButton
					>
				</div>
				<NavList {tabs} on:tab:change={tabChange} />
			</div>
			<MenuButton text="Sort By" color="var(color-blue-7)" style="height: 48px;" list={sortList}
			></MenuButton>
		</div>
		<PageLoading loading={$loading}>
			{#each helpList as i}
				<Record
					title={getValue(i, 'title', '---')}
					tag={getValue(i, 'cateName', '---')}
					date={getValue(i, 'created_at', '---')}
					answer={getValue(i, 'answer', '---')}
				/>
			{/each}
		</PageLoading>
		<PagingNavigation
			position="end"
			pageSize={params.size}
			bind:total
			bind:currentPage={params.page}
			on:pageNavigationChange={() => reqInfo(true)}
		></PagingNavigation>
		<QueDialog bind:this={queDialogRef} />
	</div>
</div>
